<#systemSituation globalInfo="${globalInfo}"/>
<!-- widget grid with search -->
<section>

    <!-- row -->
    <div class="row">

        <!-- NEW WIDGET START -->
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

            <div class="jarviswidget jarviswidget-color-blueDark" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-table"></i> </span>

                    <h2>调试工具 </h2>

                </header>

                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->
                    </div>
                    <!-- end widget edit box -->
                    <!-- widget content -->
                    <div class="widget-body fuelux">

                        <div class="wizard">
                            <ul class="steps">
                                <li data-target="#step1" class="active">
                                    <span class="badge badge-info">1</span>工具介绍<span class="chevron"></span>
                                </li>
                                <li data-target="#step2">
                                    <span class="badge">2</span>危险提示<span class="chevron"></span>
                                </li>
                                <li data-target="#step3">
                                    <span class="badge">3</span>操作步骤<span class="chevron"></span>
                                </li>
                                <li data-target="#step4">
                                    <span class="badge">4</span>权限认证<span class="chevron"></span>
                                </li>
                                <li data-target="#step5">
                                    <span class="badge">5</span>工具使用<span class="chevron"></span>
                                </li>
                            </ul>
                            <div class="actions">
                                <button type="button" class="btn btn-sm btn-primary btn-prev">
                                    <i class="fa fa-arrow-left"></i>Prev
                                </button>
                                <button type="button" class="btn btn-sm btn-success btn-next" data-last="Finish">
                                    Next<i class="fa fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                        <div class="step-content">
                            <form class="form-horizontal" id="debug-wizard" method="post">
                                <div class="hide">
                                    <input type="hidden" name="url-info"> 　
                                </div>
                                <div class="step-pane active" id="step1">
                                    <h3><strong>工具介绍</strong> - <span class="text-info"> 日志调试工具的简单介绍</span>
                                        <div class="pull-right log-monitor"><a href="javascript:void(0);"
                                                                               class="btn btn-info"><i
                                                class="fa fa-desktop"></i> 日志监控</a></div>
                                        <div class="pull-right log-all margin-right-5"><a href="javascript:void(0);"
                                                                           class="btn btn-warning"><i
                                                class="fa fa-table"></i> 查看全部</a></div>
                                    </h3>
                                    <div class="tree">
                                        <ul>
                                            <li>
                                                <span><i class="fa fa-lg fa-list-alt"></i> 工具描述</span>
                                                <ul>
                                                    <li>
                                                        <span class="label label-success"><i
                                                                class="fa fa-lg fa-book"></i> 概念</span>
                                                        <ul>
                                                            <li>
                                                                <span><i
                                                                        class="fa fa-check-circle-o"></i> 1</span> &ndash;
                                                                <a>日志注入是一个可以在代码的任意区域无入侵地加入日志的工具，适用于线上问题排查.</a>
                                                            </li>
                                                            <li>
                                                                <span><i
                                                                        class="fa fa-check-circle-o"></i> 2</span> &ndash;
                                                                <a>日志注入
                                                                    为开发人员提供一个易于使用的平台，帮助开发人员在正在运行的系统中随时加入自己想要的日志，而免于修改代码和重启.</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <span class="label label-warning"><i
                                                                class="fa fa-lg fa-shield"></i> 使用场景举例</span>
                                                        <ul>
                                                            <li>
                                                                <span><i
                                                                        class="fa fa-check-circle-o"></i> 1</span> &ndash;
                                                                <a>一些同学在写代码时，把异常吃掉了，使得问题难以查找，可以使用这个工具，动态打印出被吃掉的异常，而不用停机.</a>
                                                            </li>
                                                            <li>
                                                                <span><i
                                                                        class="fa fa-check-circle-o"></i> 2</span> &ndash;
                                                                <a>一些项目依赖第三方jar包，如果发生问题，但第三方包中无日志打印，以往可能需要重新编译第
                                                                    三方包，加上日志，重启服务，然后排查问题。但使用这个工具，就可以直接动态加入日志，而不用修改第三方jar包，也不用重启.</a>
                                                            </li>
                                                            <li>
                                                                <span><i
                                                                        class="fa fa-check-circle-o"></i> 3</span> &ndash;
                                                                <a>有一些特殊情况或一些线上紧急需求,没时间重新编译发布程序,需要临时hack一个版本.</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <span class="label label-danger"><i
                                                                class="fa fa-lg fa-exclamation-triangle"></i> 免责声明</span>
                                                        <ul>
                                                            <li>
                                                                <span><i
                                                                        class="fa fa-check-circle-o"></i> 1</span> &ndash;
                                                                <a>用户完全自愿使用本程序，您必须了解使用本软件的风险，且愿意承担使用本程序的风险.</a>
                                                            </li>
                                                            <li>
                                                                <span><i
                                                                        class="fa fa-check-circle-o"></i> 2</span> &ndash;
                                                                <a>任何情况下，我们不就因使用或不能使用本程序所发生的特殊的、意外的、直接或间接的损失承担赔偿责任（包括但不限于，资料损失，资料执行不精确，或因由您或第三人承担的损失，或本程序无法与其他程序运作等);即使已经被事先告知该损害发生的可能性.</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <br>

                                </div>

                                <div class="step-pane" id="step2">
                                    <h3><strong>危险提示</strong> - <span
                                            class="text-warning"> 调试工具会修改代码,有一定风险,非专业人员请勿尝试</span></h3>
                                    <div class="tree">
                                        <ul>
                                            <li>
                                                <span class="text-info"><i class="fa fa-lg fa-list-alt"></i> 工具可能会导致的危险</span>
                                                <ul>
                                                    <li>
                                                        <span class="label label-primary"><i
                                                                class="fa fa-lg fa-shield"></i> 工具会修改日志和控制台的输出,导致日志和期望的不一致</span>
                                                    </li>
                                                    <li>
                                                        <span class="label label-info"><i
                                                                class="fa fa-lg fa-cog"></i> 工具会修改运行期代码,导致运气代码和源代码不一致</span>
                                                    </li>
                                                    <li>
                                                        <span class="label label-warning"><i
                                                                class="fa fa-lg fa-hard-of-hearing"></i> 工具会修改JVM的运行字节码,可能导致JVM崩溃,程序无法运行</span>
                                                    </li>

                                                    <li>
                                                         <span class="label label-danger"><i
                                                                 class="fa fa-lg fa-exclamation-triangle"></i> 工具使用错误可能会导致系统崩溃</span>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <hr class="simple">

                                    <div class="text-center">
                                        <label class="checkbox">
                                            <input type="checkbox" class="checkbox style-0" name="danger_agree">
                                            <span>我已经阅读并确认程序风险</span></label>
                                    </div>

                                </div>

                                <div class="step-pane" id="step3">
                                    <h3><strong>功能描述</strong> - <span class="text-success">操作可能具有毁灭性,请按照步骤进行</span>
                                        <div class="pull-right help-pdf"><a href="javascript:void(0);"
                                                                            class="btn btn-success"><i
                                                class="fa fa-question-circle"></i> 详细</a></div>
                                    </h3>
                                    <div class="tree">
                                        <ul>
                                            <li>
                                                <span class="txt-color-blueLight"><i class="fa fa-lg fa-list-alt"></i> 这里只列出基本步骤,详细步骤请参考PDF文档</span>
                                                <ul>
                                                    <li>
                                                        <span class="label label-success"><i
                                                                class="fa fa-lg fa-list"></i> 打开工具首页,可以看到JVM列表,选择需要调试的JVM点击注入</span>
                                                    </li>
                                                    <li>
                                                        <span class="label label-success"><i
                                                                class="fa fa-lg fa-search"></i> 根据调试内容选择注入的方式</span>
                                                    </li>
                                                    <li>
                                                        <span class="label label-default"><i
                                                                class="fa fa-lg fa-save"></i> 根据注入方式输入需要注入的表单数据,然后提交</span>
                                                    </li>
                                                    <li>
                                                        <span class="label label-warning"><i
                                                                class="fa fa-lg fa-info"></i> 如果只是调试,最后结束时记得清除注入</span>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <br>
                                </div>

                                <div class="step-pane" id="step4">
                                    <h3><strong>权限认证</strong> - <span class="text-danger">必须通过权限认证才可以进行工具使用</span></h3>
                                    <br>
                                    <br>
                                    <!-- wizard form starts here -->
                                    <div class="row">
                                        <label class="col-md-2 control-label">权限认证名</label>
                                        <div class="col-sm-9">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-envelope fa-lg fa-fw"></i></span>
                                                    <input class="form-control input-lg" placeholder="admin" value=""
                                                           type="text" name="debugname">

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-1"></div>
                                    </div>
                                    <div class="row">
                                        <label class="col-md-2 control-label">权限认证密码</label>
                                        <div class="col-sm-9">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-lock fa-lg fa-fw"></i></span>
                                                    <input class="form-control input-lg" type="password" value=""
                                                           name="debugpass">

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group has-success">
                                        <label class="col-md-2 control-label"></label>
                                        <div class="col-md-9">
                                            <span class="help-block pull-right">用户名和密码请询问超级管理员!</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="step-pane" id="step5">
                                    <h3><strong>Step 5 </strong> - 认证完成!</h3>
                                    <br>
                                    <br>
                                    <h1 class="text-center text-success start-debug"><i class="fa fa-check"></i>
                                        <a>
                                            Congratulations!
                                            <br>
                                            <br>
                                            <small>点击这里或者Finish启动调试工具!</small>
                                        </a>
                                    </h1>
                                    <br>
                                    <br>
                                    <br>
                                    <br>
                                </div>

                            </form>
                        </div>

                    </div>
                    <!-- end widget content -->

                </div>
            </div>

        </article>
        <!-- WIDGET END -->
    </div>
    <!-- end row -->
</section>
<!-- end widget grid with search -->

<script type="text/javascript">

    /* DO NOT REMOVE : GLOBAL FUNCTIONS!
     *
     * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
     *
     * // activate tooltips
     * $("[rel=tooltip]").tooltip();
     *
     * // activate popovers
     * $("[rel=popover]").popover();
     *
     * // activate popovers with hover states
     * $("[rel=popover-hover]").popover({ trigger: "hover" });
     *
     * // activate inline charts
     * runAllCharts();
     *
     * // setup widgets
     * setup_widgets_desktop();
     *
     * // run form elements
     * runAllForms();
     *
     ********************************
     *
     * pageSetUp() is needed whenever you load a page.
     * It initializes and checks for all basic elements of the page
     * and makes rendering easier.
     *
     */
    pageSetUp();

    /*
     * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
     */
    // PAGE RELATED SCRIPTS
    // pagefunction
    var pagefunction = function () {
        // load debug wizard
        loadScript("/static/js/plugin/fuelux/wizard/wizard.js", debugWizard);

        function debugWizard() {
            var $wizard_form = $("#debug-wizard");
            var $validator = $wizard_form.validate({

                rules: {
                    debugname: {
                        required: true,
                        minlength: 3
                    },
                    debugpass: {
                        required: true,
                        minlength: 5
                    }
                },

                messages: {},

                highlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                },
                errorElement: 'span',
                errorClass: 'help-block',
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });


            var wizard = $('.wizard').wizard();

            wizard.on('change', function (evt, data) {
                // data { step:1, direction:'next' } 4-next 5-previous
                if (data) {
                    if ((data['step'] == 4 && data['direction'] == 'next')) {
                        var $valid = $wizard_form.valid();
                        if (!$valid) {
                            $validator.focusInvalid();
                            parent.messageBox("必须填写认证信息!", "error");
                            // Use event.preventDefault() to cancel the event.
                            evt.preventDefault();
                            return false;
                        }
                        var name = $wizard_form.find('input[name=debugname]').val();
                        var pass = $wizard_form.find('input[name=debugpass]').val();
                        // 发送请求验证密码是否通过,不通过返回错误
                        $.ajax({
                            url: '${ctx}/tools/debug/auth',
                            data: {name: name, pass: pass},
                            dataType: 'json',
                            type: 'post',
                            async: false,
                            success: function (data) {

                                if (data && data.status == 'success') {
                                    $wizard_form.find('input[name=url-info]').val(data.data);
                                    parent.messageBox(data.message, "success");
                                } else {
                                    parent.messageBox(data.message, "error");
                                    evt.preventDefault();
                                    return false;
                                }
                            },
                            error: function () {
                                parent.messageBox("认证发生错误,请查看日志信息", "error");
                                evt.preventDefault();
                                return false;
                            }
                        });
                    }
                    if ((data['step'] == 2 && data['direction'] == 'next')) {
                        var agree = $wizard_form.find('input[name=danger_agree]').prop("checked");
                        if (!agree) {
                            parent.messageBox("必须确认程序的运行风险才能继续进行!", "error");
                            evt.preventDefault();
                            return false;
                        }
                    }
                }

            });

            wizard.on('finished', function () {
                opentool();
            });

            $('.start-debug').on('click', function () {
                opentool();
            });

            // 查看详细的pdf说明
            $wizard_form.find('.help-pdf').on('click', function () {
                var url = "debug/Java注入方式线上调试代码.pdf";
                var params = "";
                var base64 = false;
                var res = '?url=' + encodeURIComponent(url) + '&params=' + params + '&base64=' + base64;
                layer.open({
                    type: 2,
                    title: 'PDF信息',
                    shadeClose: false,
                    btn: ['关闭'],
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['960px', '640px'],
                    content: '${ctx}/tools/pdf' + res
                });
            });

            function opentool() {
                var url = $wizard_form.find('input[name=url-info]').val();
                layer.open({
                    type: 2,
                    title: '调试工具',
                    shadeClose: false,
                    btn: ['关闭'],
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1200px', '640px'],
                    content: url
                });
            }
        }

        // 打开日志实时监控
        $('.log-monitor').on('click', function () {
            layer.open({
                type: 2,
                title: '系统日志实时监控',
                shadeClose: false,
                btn: ['关闭'],
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['1150px', '650px'],
                content: '${ctx}/tools/logger',
                end:function () {
                }
            });
        });

        // all action
        $('.log-all').on('click', function () {
            // 打开全部日志查看
            layer.open({
                type: 2,
                title: '查看所有日志',
                shadeClose: false,
                btn: ['关闭'],
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['1150px', '650px'],
                content: '${ctx}/tools/logger/all' ,
                end:function () {
                }
            });
        });
    };

    // destroy generated instances
    // pagedestroy is called automatically before loading a new page
    // only usable in AJAX version!
    var pagedestroy = function () {
    };
    // end destroy

    // load related plugins
    pagefunction();

</script>